<template>
	<view>
		<custom title="我的信友圈" mode="2" fixed="fixed"></custom>
		<view style="overflow: hidden;">
			<frienditem v-for="(item, i) in list" :key="i" :info="item" :showDel="true" @refresh="refresh" @init="init">
			</frienditem>
		</view>
		
		<qq-footer :list="list" :show="true"></qq-footer>
		
		<fixed-line></fixed-line>
		<common></common>
	</view>
</template>

<script>
import Custom from '../../components/custom/custom.vue';
import frienditem from './frienditem.vue';
import { timestampToTime } from '../../pages/course/utils'
import { getFriendCircleList, getFriendCircleDetail } from './api/friendCircle'
export default {
	components: {
		frienditem,
		Custom
	},
	data() {
		return {
			list: [],
			page: 1,
			is_null: false,
			first_request: true
		}
	},
	onLoad() {
		uni.$on('refresh', this.init)
		this.getList()
	},
	onUnload() {
		uni.$off('refresh')
	},
	onPullDownRefresh() {
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 200);
		this.init();
	},
	onReachBottom() {
		this.getList(this.page);
	},
	methods: {
		async refresh({id}) {
			const { data } = await getFriendCircleDetail({id})
			this.list = this.list.map(item => {
				if(item.id === id) {
					item = {
						...item,
						isLike: data.isLike,
						likeNames: data.likeNames,
						commentDtos: data.commentDtos
					}
				}
				return item
			})
		},
		init() {
			this.setData({
				list: [],
				page: 1,
				is_null: false,
			});
			this.getList();
		},
		async getList(page = 1) {
			if (this.is_null) {
				return;
			}
			let info = {
				page,
				size: 10,
				userId: this.user_info.id
			};
			const { data, status } = await getFriendCircleList(info);
			this.first_request = false;
			if (status == 200) {
				if (data && data.records.length > 0) {
					const list = data.records.map(item => {
						item.userInfo = {
							avatarUrl: item.avatarUrl,
							name: item.remark,
							time: timestampToTime(item.createTime, 'Mm')
						}
						return item
					})
					this.list = [...this.list, ...list];
				}
				if (data.records.length < 10) {
					this.is_null = true;
				} else {
					this.page++;
				}
			}
		},
	}
}
</script>

<style lang="scss">
page {
	background-color: #f5f6f7;
}
</style>
